<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="">
			用户名: <input type="text" name="username" id="username" /><br />
			密码: <input type="password" name="password" id="password" onfocus="txtFocus()" onblur="txtBlur()" /><br />
			真实名字: <input type="text" name="password" id="realname" onfocus="txtFocus()" onblur="txtBlur()" /><br />
			邮箱: <input type="text" name="password" id="email" onfocus="txtFocus()" onblur="txtBlur()" /><br />
			电话: <input type="text" name="password" id="tel" onfocus="txtFocus()" onblur="txtBlur()" /><br />
			<select onchange="changeColor()" id="colorSel" >
				<option value="red">红色</option>
				<option value="blue">蓝色</option>
				<option value="green">绿色</option>
			</select>
			红(0-255)<input type="number" min="0" id="rInput" value="255" /><br />
			绿(0-255)<input type="number" min="0" id="gInput" value="255" /><br />
			蓝(0-255)<input type="number" min="0" id="bInput" value="255" /><br />
		</form>
		
		<script type="text/javascript">
			function txtFocus(){
				console.log("获得焦点");
				event.target.style.background="#ffff66";
			}
			function txtBlur(){
				console.log("失去焦点");
				event.target.style.background="#ffffff";
			}
			
				username.onfocus=txtFocus;
				username.onblur=txtBlur;
			
			function changeColor(){
				console.log(colorSel.value);
				document.body.style.background=colorSel.value;
			}
			
		</script>
		
	</body>
</html>
